<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" name="usersRolename" id="usersRolename" autocomplete="off" placeholder="输入关键词">
    </div>
    <button class="layui-btn" data-type="reload" id="reload">查询</button>
</div>
<script type="text/html" id="zz">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<!-- 操作指令 -->
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: '/selUsersList',
            title: '用户数据表',
            cols: [
                [{
                    field: '',
                    width: 325,
                    title: 'ID',
                    templet: '#zz'
                }, {
                    field: 'usersId',
                    title: '序号',
                    hide: true
                }, {
                    field: 'usersRolename',
                    title: '名称',
                    width: 325
                }, {
                    field: 'usersId',
                    title: '申报',
                    width: 325,
                    templet: function (object) {
                        var count = [object.usersId];
                        for (var i = 0; i < count.length; i++) {
                            if (object.usersId == count[i]) {
                                return '<a href="/selItemsByIdes?id='+object.usersId+'" ><font color="#0000FF"  id="' + count[i] + '">  ' + $(function () {
                                    $.ajax({
                                        type: "post",
                                        url: '/selItemsCount',
                                        // async : false,
                                        dataType: "text",
                                        data: {
                                            id: object.usersId
                                        },
                                        success: function (data) {
                                            var id = '#' + count[i];
                                            // console.log(data);
                                            $(id).text(data);
                                        },
                                    })
                                }) + '</font></a>'
                            }
                        }
                    }
                }, {
                    field: 'usersId',
                    title: '关注',
                    width: 325,
                    templet: function (object) {
                        var counts = [object.usersId];
                        for (var i = 0; i < counts.length; i++) {
                            if (object.usersId == counts[i]) {
                                return '<a href="selAttentionByIdss?id='+object.usersId+'" ><font color="#0000FF"  id="' + counts[i] + 's">  ' + $(function () {
                                    $.ajax({
                                        type: "post",
                                        url: '/selAttentionCount',
                                        // async : false,
                                        dataType: "text",
                                        data: {
                                            id: object.usersId
                                        },
                                        success: function (data) {
                                            var ids = '#' + counts[i]+'s';
                                            // console.log(data);
                                            $(ids).text(data);
                                        },
                                    })
                                }) + '</font></a>'
                            }
                        }
                    }
                }]
            ],
            page: true,
            height: 515,
            id: 'testReload',
        });
        // 模糊查询 搜索
        var $ = layui.$, active = {
            reload: function () {
                var usersRolename = $('#usersRolename').val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        usersRolename: usersRolename
                    }
                });
            }
        };
        //提交
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>
